<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from "@/utils/axios.ts";
import { localSet } from '@/utils'

const router = useRouter()
const username = ref('')
const password = ref('')
const loading = ref(false)

const handleLogin = async () => {
  if (loading.value) return;

  loading.value = true;

  try {
    console.log("登录请求:", { account: username.value, password: password.value });

    const response = await axios.post("/api/users/login", null, {
      params: {
        account: username.value,
        password: password.value
      }
    });
    localSet('token', response.data);
    console.log("token:",response.data);
    console.log("登录响应:", response);

    if(response.code == 200){
      ElMessage({
        message: response.msg,
        type: "success",
        duration: 1000,
        onClose: () => {
          // 保存 token 到 localStorage
          localStorage.setItem('token', response.data);
          router.push('/home');
        }
      })
    } else {
      ElMessage({
        message: response.msg || '登录失败',
        type: "error",
        duration: 2000,
      })
    }
  } catch (error: any) {
    console.error("登录请求失败:", error);

    if (error.response) {
      // 服务器返回了错误状态码
      console.error("响应数据:", error.response.data);
      console.error("状态码:", error.response.status);

      ElMessage({
        message: `服务器错误 (${error.response.status})，请检查后端服务`,
        type: "error",
        duration: 3000,
      })
    } else if (error.request) {
      // 请求已发出但没有收到响应
      ElMessage({
        message: '网络错误，请检查后端服务是否启动',
        type: "error",
        duration: 3000,
      })
    } else {
      // 其他错误
      ElMessage({
        message: '请求配置错误',
        type: "error",
        duration: 3000,
      })
    }
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <div class="login-form">
    <form @submit.prevent="handleLogin">
      <div class="form-group">
        <label for="username">
          <i class="icon">👤</i> 用户名/手机号
        </label>
        <input
            id="username"
            v-model="username"
            type="text"
            placeholder="请输入您的用户名或手机号"
            required
            :disabled="loading"
        />
      </div>
      <div class="form-group">
        <label for="password">
          <i class="icon">🔒</i> 密码
        </label>
        <input
            id="password"
            v-model="password"
            type="password"
            placeholder="请输入您的密码"
            required
            :disabled="loading"
        />
      </div>
      <button type="submit" class="submit-btn" :disabled="loading">
        <span>{{ loading ? '登录中...' : '进入社区' }}</span>
        <i class="arrow" v-if="!loading">→</i>
      </button>
    </form>
    <p class="form-footer">
      <router-link to="/start/forgotpassword" class="footer-link">忘记密码</router-link>
    </p>
  </div>
</template>

<style scoped>
/* 原有样式保持不变，只添加禁用状态样式 */
.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.login-form {
  width: 100%;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

label {
  color: #444;
  font-size: 0.95rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon {
  font-size: 1.1rem;
}

input {
  width: 100%;
  padding: 0.9rem 1rem 0.9rem 2.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  background-color: #f8f9fa;
}

input:focus {
  outline: none;
  border-color: #2a4b8c;
  box-shadow: 0 0 0 3px rgba(42, 75, 140, 0.1);
  background-color: #fff;
}

.submit-btn {
  width: 100%;
  padding: 1rem;
  background: linear-gradient(to right, #2a4b8c, #3a6bc5);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 12px rgba(42, 75, 140, 0.3);
}

.submit-btn:hover {
  background: linear-gradient(to right, #3a6bc5, #2a4b8c);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(42, 75, 140, 0.4);
}

.arrow {
  font-size: 1.2rem;
}

.form-footer {
  color: #666;
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.9rem;
}

.footer-link {
  color: #2a4b8c;
  text-decoration: none;
  font-weight: 500;
}

.footer-link:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  input {
    padding: 0.8rem 1rem 0.8rem 2.2rem;
  }

  .submit-btn {
    padding: 0.9rem;
  }
}
</style>